<template>
	<view>
		<!-- <qi-navtabbar>
			<view slot="center">分类</view>
		</qi-navtabbar> -->
		<!-- 搜索按钮 -->
		<view class="u-search-box">
			<u-search placeholder="搜索商品" v-model="keyword" clearabled 
			height="60"
			@change="changesearch"
			 @custom="searchProduct" 
			@clear="clearSearch"
				@search="searchProduct"></u-search>
		</view>
		<view class="iconfont icon-qudingbu  back-top" v-show="isShow" @tap="TapclickNavback"></view>
		<!-- 分类展示区 -->
		<view class="scrollmian">
			<scroll-view scroll-y class="leftscroll">
				<block v-for="item in categories" :key="item.id">
					<view class="leftgoodslistname" :class="currentId == item.id ? 'active' : ''" @tap="swichMenu(item.id)">
						{{ item.name }}
					</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y class="rightscroll" @scroll="refscroll" 
			:scroll-top="scrollTop"
				@scrolltolower="scrollToBottom">
				<view class="solriglist">
					<navigator :url="`/pages/goods/detail?id=${book.id}`" class="thumb-box " v-for="(book, index) in goodsList"
						:key="index">
						<u-lazy-load :image="book.cover_url" class="item-menu-image" :loading-img="loadingImg"
							:error-img="loadingImg"></u-lazy-load>
						<text class="item-menu-name">{{ book.title }}</text>
					</navigator>
				</view>
				<qi-tolower id="box">
					<view v-if="!isLastPage">加载中。。。</view>
				</qi-tolower>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js';
	export default {
		mixins: [badgeMix],
		name: 'Goods',
		data() {
			return {
				loadingImg: 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
				// Tab栏滚动条位置
				scrollTop: 0,
				isShow: false,
				// 选中卡片ID(初始为2)
				currentId: null,
				// 分类数据
				categories: [],
				// 商品数据
				goodsList: [],
				
				// 搜索关键字
				keyword: '',
				// 当前页码
				page: 1,
				// 是否最后一页
				isLastPage: false
			};
		},
		onLoad() {
			this.getCateAndProData();
		},
		mounted() {
			if (!this.isLastPage) {
				this.page += 1;
				this.getCateDataList();
			}
		},

		methods: {
			changesearch(){
				// let timer = false
			// this.clearSearchCache()
			// let	timer = setTimeout(() => {
			// 		this.getCateDataList()
			// 	clearTimeout(timer);
			// 	}, 500);
				// 此处用法为在js中调用，需要写this.$u.throttle()
								this.$u.throttle(this.searchProduct, 500)
			},
			// 获取并储存分类和商品列表数据
			async getCateAndProData() {
				// 整理参数
				const params = {
					page: this.page,
					title: this.keyword,
					category_id: this.currentId
				};

				console.log(params);
				// 请求并保存数据
				let res = await this.$u.api.getGoodsCategory(params);
				this.categories = res.categories
					.slice(0, 5)
					.map(item => {
						return item.children.slice(0, 3);
					})
					.flat(Infinity);
				// #ifndef MP-WEIXIN
				this.goodsList = [...this.goodsList, ...res.goods.data];
				// #endif
				// #ifdef MP-WEIXIN
				this.goodsList = [...this.goodsList, ...res.recommend_goods];
				// #endif
				// 判断当前数据是否存在下一页
				this.isLastPage = res.goods.next_page_url ? false : true;
			},
			async getCateDataList() {
				// 整理参数
				const params = {
					page: this.page,
					title: this.keyword,
					category_id: this.currentId
				};
				console.log(params);
				// 请求并保存数据
				let res = await this.$u.api.getGoodsCategory(params);
				// #ifndef MP-WEIXIN
				this.goodsList = [...this.goodsList, ...res.goods.data];
				// #endif
				// 判断当前数据是否存在下一页
				this.isLastPage = res.goods.next_page_url ? false : true;
			},
			// 点击左边的栏目切换
			async swichMenu(id) {
				// 如果点击当前卡片不进行操作
				if (id == this.currentId) return;
				// 改变当前卡片序号
				this.currentId = id;
				// 清除数据缓存
				this.clearSearchCache();
				// 调用更新搜索数据
				this.getCateDataList();
			},
			// 搜索商品
			searchProduct() {
				// 清除数据缓存
				this.clearSearchCache();
				// 调用更新搜索数据
				this.getCateDataList();
			},
			// 商品区域触底事件(分页加载)
			scrollToBottom() {
				// 如果未到底页
				if (!this.isLastPage) {
					// 页码加一
					this.page += 1;
					// 再次请求数据
					this.getCateDataList();
				} else {
					this.$u.toast('没有更多数据了');
				}
			},

			// 清除上次筛选数据缓存
			clearSearchCache() {
				this.page = 1;
				this.goodsList = [];
			},
			// 清除搜索
			clearSearch() {
				console.log(22);
				this.keyword = ''
				// 清除数据缓存（关键字自动会清除）
				this.clearSearchCache();
				// 调用更新搜索数据
				this.getCateDataList();
			},
			refscroll(e) {
				this.scrollTop = e.detail.scrollTop;
				e.detail.scrollTop > 600 ?
					(this.isShow = true) :
					(this.isShow = false);
			},
			TapclickNavback() {
				console.log(11);
				this.scrollTop = this.scrollTop === 0 ? 1 : 0;
				// this.$nextTick(() => {
				// 	this.windsessionStorageScroll.num = 0;
				// });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-search-box {
		// background-color: red;
		padding: 18rpx 30rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to right, #3388ee, #4db9f1);
	}

	.scrollmian {
		// #ifdef H5
		height: calc(100vh  - var(--window-bottom) - 100rpx );
		
		// height: calc(100vh - 80px - var(--window-bottom) - var(--window-top));
		// #endif
		// #ifdef MP
		// height: calc(100vh - 100px - var(--window-bottom) - 20px);
		// #endif
		display: flex;

		background-color: rgb(234, 234, 234);
	}

	.leftscroll {
		flex: 0 0 200rpx;
		height: 100%;
		background-color: #f7f7f7;

		.leftgoodslistname {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
		}

		.active {
			background-color: #ffffff;
			position: relative;

			&::before {
				content: ' ';
				display: block;
				width: 3px;
				height: 30px;
				background-color: #c00000;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
	}

	.rightscroll {
		flex: 1;
		height: 100%;
		background-color: #fff;

		.solriglist {
			display: flex;
			flex-wrap: wrap;

			.thumb-box {
				width: 33.33%;
				// width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.item-menu-image {
					width: 100%;
					// height: 100%;
				}

				.item-menu-name {
					font-weight: normal;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: $u-main-color;
					display: inline-block;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: center;
				}
			}
		}
	}

	.back-top {
		height: 40px;
		width: 40px;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 100px;
		right: 20rpx;
		text-align: center;
		line-height: 40px;
		z-index: 99;
		font-size: 24rpx;
		// background-image:('@/static/logo.png');
	}
</style>